<template>
	<div>
		<mobile-common-pop v-model="isShow" @update:sure="handleSure" :height="height">
			<el-tabs v-model="activeName" class="nation-tabs" :stretch="true" @tab-change="handlerChange">
				<el-tab-pane class="nation-tabs-item" v-for="item in NATION_TAGS" :key="item" :name="item" :label="item" ref="content">
					<div class="nation-tabs-item-block" v-for="value in currentName" :key="value" @click.stop="handleClick($event)">
						<div class="nation-tabs-item-block-classify" v-if="value !== '1'">
							<span>{{ value }}</span>
						</div>
						<div
							class="nation-tabs-item-block-content"
							v-if="data"
							v-for="(nationInfo, key) in data.nation_arr[value === '1' ? NATION_TAGS[0] : value]"
							:key="key"
							:data-key="key"
							:data-classify="item"
						>
							<!-- 单选 -->
							<div class="nation-tabs-item-block-content-radio" :data-key="key" :data-classify="item"></div>
							<!-- 旗帜 -->
							<div class="nation-tabs-item-block-content-flag">
								<img alt="" :src="nationInfo.flag" />
							</div>
							<!-- 名称 -->
							<div class="nation-tabs-item-block-content-name">
								<span> {{ nationInfo.name }}</span>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</mobile-common-pop>
	</div>
</template>

<script setup>
	import { NATION_TAGS } from '@/constant/index.js';
	const model = defineModel();
	const isShow = ref(model);
	const activeName = ref(NATION_TAGS[0]);
	const contentList = useTemplateRef('content');
	let prevIsActive = null;
	let { data } = await useFetch('/api/nationList');
	data = data?.value?.data || null;
	defineProps({
		height: {
			type: String,
			default: '750px',
		},
	});
	const emits = defineEmits(['update:sure']);
	function handleSure() {
		if (!prevIsActive) {
			return;
		}
		const key = prevIsActive.dataset.key;
		const classify = prevIsActive.dataset.classify;
		const info = data['nation_arr'][classify][key];
		emits('update:sure', info);
	}
	const currentName = computed(() => {
		if (activeName.value === NATION_TAGS[0]) {
			return '1';
		}
		return activeName.value;
	});
	function handleClick(e) {
		const parentElement = findParentElement(e.target, 'nation-tabs-item-block-content');
		if (!parentElement) {
			return;
		}
		const radio = parentElement.querySelector('.nation-tabs-item-block-content-radio');
		if (radio === prevIsActive) {
			return radio?.classList.toggle('is-active');
		}
		radio.classList?.add('is-active');
		prevIsActive?.classList.remove('is-active');
		prevIsActive = radio;
	}
	// 切换选项卡时，恢复上次选中
	function handlerChange() {
		if (!prevIsActive) {
			return;
		}
		nextTick(() => {
			for (const item of contentList.value) {
				const tabsItemElement = item.$refs.paneRef;
				if (item.$refs.paneRef.id.includes(activeName.value)) {
					if (tabsItemElement.id.includes(activeName.value)) {
						const radios = tabsItemElement.querySelectorAll('.nation-tabs-item-block-content-radio');
						for (let i = 0; i < radios.length; i++) {
							const radio = radios[i];
							if (radio.dataset.key === prevIsActive.dataset.key) {
								radio.classList?.add('is-active');
								return (prevIsActive = radio);
							}
						}
					}
				}
			}
		});
	}
	// 查找父级元素中指定类名的父元素 没有返回 undefined
	function findParentElement(element, className) {
		while (element && element !== document.body) {
			if (element.classList.contains(className)) {
				return element;
			}
			element = element.parentElement;
		}
		return null;
	}
</script>

<style lang="scss" scoped>
	.nation-tabs {
		--el-color-primary: var(--blog-box-bg-color-red);
		width: 100%;
		height: 100%;
		margin: 0 auto;
		cursor: pointer;
		&:deep(.el-tabs__content) {
			overflow: auto;
			height: calc(300px - 54px);
		}
		&:deep(.el-tabs__nav-scroll) {
			overflow-x: scroll;
		}
		&:deep(.el-tabs__item) {
			@include font(_, 28px, 36px, 400, var(--blog-normal-text-color));
			&.is-active {
				@include font(_, 30px, 38px, 700, var(--blog-box-bg-color-red));
			}
		}
		&:deep(.el-tabs__nav-prev) {
			display: none;
		}
		&:deep(.el-tabs__nav-next) {
			display: none;
		}
		&:deep(.el-tabs__nav-wrap) {
			padding: 0;
		}
		.nation-tabs-item-block {
			margin-bottom: 100px;
			.nation-tabs-item-block-classify,
			.nation-tabs-item-block-content {
				height: 104px;
				@include flex(_, flex-start);
				border-bottom: 1px solid #cecece;
			}
			.nation-tabs-item-block-classify {
				height: 50px;
				@include font(_, 24px, 36px, 400, var(--blog-normal-text-color-black));
				// position: sticky;
				// top: 10px;
				span {
					transform: translateX(8px);
				}
			}
			.nation-tabs-item-block-content {
				.nation-tabs-item-block-content-radio {
					width: 32px;
					height: 32px;
					border-radius: 50%;
					background-color: #f6f6f6;
					border: 1px solid #979797;
					margin-right: 12px;
					&.is-active {
						background-image: url('~/assets/svgs/sure_icon.svg');
						background-size: 100% 100%;
						background-position: left top;
						border: none;
					}
				}
				.nation-tabs-item-block-content-flag {
					width: 70px;
					height: 46px;
					border: 1px solid #f4f4f4;
					box-shadow: 0 2px 5px rgba($color: #000000, $alpha: 0.1);
					margin-right: 16px;
					@include flex;
				}
				.nation-tabs-item-block-content-name {
					flex: 1;
					@include font(_, 24px, 36px, 400, var(--blog-normal-text-color-black));
				}
			}
		}
	}
</style>
